<template>
  <!-- EOS钱包信息 start -->
  <div class="dataInfo">
    <div class="flexb" style="padding: 0 20px;">
      <div class="firstStage" :class="{'vipClass': $store.state.app.accountInfo && $store.state.app.accountInfo.level > 0}">
        <div v-for="(item, index) in listStatus" :key="index"
        :class="{'active': item.value === coinConfig.sortName}"
          @click="handleSelectAction(item.value)">
          {{$t(`myWallet.${item.label}`)}}
        </div>
      </div>
      <div class="selectInput flex">
        <!-- <span class="exchangeUsdt" style="cursor: pointer;" @click="handleOpenCharginChange">
          <i class="iconfont icon-huaban23-copy-copy color333"></i>
          跨链充提
        </span> -->
        <!-- 充币 -->
        <span class="exchangeUsdt" style="cursor: pointer;"
          v-if="$store.state.app.scatter.chain === 'eos' && $appName === 'eosNewdex'"
          @click="handleCoinAction({name: 'USDT'}, 2)">
          <i class="iconfont icon-huaban38 color333"></i>
          {{ $t('ct.ct60') }}
        </span>
        <!-- 提币 -->
        <span class="exchangeUsdt" style="cursor: pointer;"
          v-if="$store.state.app.scatter.chain === 'eos' && $appName === 'eosNewdex'"
          @click="handleCoinAction({name: 'USDT'}, 1)">
          <i class="iconfont icon-huaban37 color333"></i>
          {{ $t('ct.ct61') }}
        </span>
        <!-- v-if="$store.state.app.scatter.chain === 'eos'" -->
        <!-- <span class="exchangeUsdt" style="cursor: pointer;"
          @click="handleCurrencyExchange({name:'USDT'})">
          <i class="iconfont icon-huaban23-copy-copy color333"></i>
          {{ $t('exchange.exchangeUsdt') }}
        </span> -->
        <el-popover
          placement="bottom"
          width="200"
          trigger="focus"
          v-model="historyVisible"
          :popper-class="handleClass">
          <ul class="historyList">
            <li v-for="(item, index) in historyList"
              :key="index"
              @click="handleSelectHistory(item, index)">
              {{item}}
            </li>
          </ul>
          <el-input
            v-model="coinConfig.searched"
            :placeholder="$t('public.search')"
            select-when-unmatched="true"
            clearable
            prefix-icon="el-icon-search"
            slot="reference">
          </el-input>
        </el-popover>
      </div>
    </div>
    <!-- 数据列表 start -->
    <div class="table">
      <a class="shuaxin"
        :class="{'act' : refresh}" @click="handleRefresh"><i class="el-icon-refresh"></i></a>
      <!-- <el-dropdown v-if="chain === 'eos'"
        @command="handleCheckOther"
        class="menu-down inline"
        placement="bottom"
        trigger="click">
        <span class="el-dropdown-link flex" style="cursor: pointer;">
          <i class="el-icon-arrow-down el-icon--right" style="margin:0;outline: none"></i>
          <i class="country mr5"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
          v-for="(item, index) in options" :key="index"
          :command="item.subcurrencies">
            {{item.subcurrencies}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <el-table
        v-loading="loading"
        :data="tableData"
        :empty-text="hasDataForTable ? $t('myWallet.loadData') : $t('myWallet.noData')"
        style="width: 100%"
        :class="{'tronClass' : chain === 'tron'}">
        <!-- 币种 -->
        <el-table-column
          width="160"
          :label="$t('myWallet.coinCode')">
          <template slot-scope="scope">
            <!-- <img :src="scope.row.imageUrl" v-if="scope.row.imageUrl" alt="" class="imageUrl">
            <img src="@/assets/img/eos.png" v-else alt="" class="imageUrl"> -->
            <div class="newCoinImg" :class="{'newCoinImgForTron' : $appName === 'tronNewdex'}">
              <img v-if="scope.row.code === 'EOS'" src="/static/img/eos1.png" alt="">
              <img alt=""
              v-else
              :src="$appName === 'eosNewdex' ?
              `https://ndi.340wan.com/${chain}/${scope.row.contract}-${scope.row.code.toLowerCase()}.png` :
              `https://ndi.340wan.com/${chain}/${scope.row.code.toLowerCase()}.png`">
            </div>
            <span>{{ scope.row.code }}</span>
          </template>
        </el-table-column>
        <!-- 合约名称 -->
        <el-table-column
          :width="chain === 'tron' ? 328 : 140"
          :label="chain === 'tron' ? $t('candyBox.contractName') : $t('jy.heyuename')">
          <template slot-scope="scope">
            <span class="contractColor">{{ scope.row.contract }}</span>
          </template>
        </el-table-column>
        <!-- 余额 -->
        <el-table-column
          width="250"
          :label="$t('myWallet.balance')">
          <template slot-scope="scope">
            <span class="blue" style="display: block">{{ scope.row.usableCount }}</span>
            <span style="display: block; color: #999;"
            v-if="scope.row.code.toLowerCase() === 'ndx' && $store.state.app.accountInfo">
            {{ $t('ndxStake.staking') }}：{{(myStakeNdxALL).toFixed(4)}}</span>
          </template>
        </el-table-column>
        <!-- 冻结 -->
        <el-table-column
          width="130"
          :label="$t('myWallet.freezeCount')">
          <template slot-scope="scope">
            <span class="gray">{{ scope.row.freezeCount }}</span>
          </template>
        </el-table-column>
        <!-- 当前链估值 -->
        <el-table-column width="180"
          :label="$store.state.app.language === 'en' ?
          `${handleGuzhiForMat()} ${$t('myWallet.valuation')}` :
          `${handleGuzhiForMat()}${$t('myWallet.valuation')}`">
          <template slot-scope="scope">
            <span>
              {{scope.row.chainTotalValuation}} {{handleGuzhiForMat()}}
            </span>
          </template>
        </el-table-column>
        <!-- 侧链的eos估值 -->
        <el-table-column
          v-if="chain !== 'eos' && chain !== 'tron'"
          width="180"
          :label="$t('myWallet.eosValuation')">
          <template slot-scope="scope">
            <span v-if="Number(scope.row.eosValuation) === 0"> -- </span>
            <span v-else>{{scope.row.eosValuation}} EOS</span>
          </template>
        </el-table-column>
        <!-- eusd估值 -->
        <el-table-column
          v-if="chain === 'eos'"
          width="180"
          :label="$store.state.app.language === 'en' ? `${checkedValue} ${$t('myWallet.valuation')}` : `${checkedValue}${$t('myWallet.valuation')}`">
          <template slot-scope="scope">
            <span v-if="scope.row.eusdValuation && checkedValue === 'EUSD' && scope.row.eusdEnable">
              {{ scope.row.eusdValuation }} EUSD</span>
            <span v-else-if="scope.row.cusdValuation && checkedValue === 'CUSD' && scope.row.cusdEnable">
              {{ scope.row.cusdValuation }} CUSD</span>
            <span v-else-if="scope.row.usdtValuation && checkedValue === 'USDT' && scope.row.usdtEnable">{{ scope.row.usdtValuation }} USDT</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          :label="$t('myWallet.operation')">
          <template slot-scope="scope">
            <!-- <span class="action unabled" v-if="scope.row.stop" disabled><i class="iconfont logoicon icon-shuoming"></i> 暂停转账</span>
            <a href="javascript:;" class="action blue"
              v-if="!scope.row.stop"
              @click="handleToTransfer(scope.row)">
              转账
            </a> -->
            <el-popover
              placement="bottom"
              width="150"
              trigger="click">
              <div class="goTransaction" v-loading="symbolListLoading" :style="{'min-height': symbolListLoading ? '30px': 'auto'}">
                <template v-for="(item, $index) in symbolList">
                  <div v-if="symbolList && symbolList.length > 0" :key="$index" class="symbolList">
                    <a href="javascript:;" class="action blue" v-if="!scope.row.stop"
                      @click="handleToCenter(item)">
                      {{ parseSymbol(item.symbol, '')[1].toUpperCase() }}/{{ parseSymbol(item.symbol, '')[2].toUpperCase() }}
                    </a>
                  </div>
                </template>
                <div class="symbolList" style="line-height: 30px" v-if="!symbolList || symbolList.length === 0">
                  一 一
                </div>
              </div>
              <a href="javascript:;" class="action blue"
                @click="handleSymbolList(scope.row.coinId)"
                :style="$store.state.app.language === 'en' ? 'display: block;' : ''"
                slot="reference">
                {{ $t('myWallet.toTransaction') }}
              </a>
              <!-- <a href="javascript:;"
                class="action blue"
                v-if="(scope.row.name === 'EUSD' && scope.row.contract === 'bitpietokens')
                || (scope.row.name === 'EBTC' && scope.row.contract === 'bitpietokens')
                || (scope.row.name === 'USDT' && scope.row.contract === 'tethertether')"
                slot="reference" @click="handleCurrencyExchange(scope.row)">
                {{ scope.row.name === 'USDT' ? $t('exchange.exchangeUsdt') : $t('exchange.crossConv1') }}
              </a> -->
              <!-- 充币 -->
              <a href="javascript:;"
                class="action blue"
                v-if="((scope.row.name === 'ETH' || scope.row.name === 'BTC' ||scope.row.name === 'USDT' || scope.row.name === 'RRB' ||
                scope.row.name === 'ETHFI' || scope.row.name === 'MNT' || scope.row.name === 'DF')
                && scope.row.contract === 'issue.newdex') || (scope.row.name === 'EOS' && scope.row.contract === 'eosio.token')"
                slot="reference" @click="handleCoinAction(scope.row, 2)">
                {{ $t('ct.ct79') }}
              </a>
              <!-- 提币 -->
              <a href="javascript:;"
                class="action blue"
                v-if="((scope.row.name === 'ETH' || scope.row.name === 'BTC' || scope.row.name === 'USDT' || scope.row.name === 'RRB' ||
                scope.row.name === 'ETHFI' || scope.row.name === 'MNT' || scope.row.name === 'DF')
                && scope.row.contract === 'issue.newdex') || (scope.row.name === 'EOS' && scope.row.contract === 'eosio.token')"
                slot="reference" @click="handleCoinAction(scope.row, 1)">
                {{ $t('ct.ct80') }}
              </a>
            </el-popover>
            <!-- <a href="javascript:;" class="action blue"
              @click="handleGetBackAdvance(scope.row)">
              取回预付款
            </a> -->
            <!-- <a href="javascript:;" class="action blue"
              @click="handleToHistory(scope.row)">
              财务记录
              <span class="newMsg" v-if="scope.row.newMsg"></span>
            </a> -->
            <a v-if="scope.row.code.toLowerCase() === 'ndx'"
              href="javascript:;"
              class="action blue"
              @click="handleMortgageNdxShow(1)">
              {{ $t('ndxStake.stakes') }}
            </a>
            <a v-if="scope.row.code.toLowerCase() === 'ndx'"
              href="javascript:;"
              class="action blue"
              @click="handleMortgageNdxShow(2)">
              {{ $t('ndxStake.redeem') }}
            </a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数据列表 end -->

    <!-- 取回预付款 start -->
    <el-dialog
      class="dialog"
      :visible.sync="showGetBackAdvance"
      width="450px"
      center>
      <get-back-advance :coin="'EOS'" :type="3" @listenCloseGetBackAdvance="handleCloseGetBackAdvance" />
    </el-dialog>
    <!-- 取回预付款 end -->
    <!-- 赎回抵押 -->
    <el-dialog
      class="mortgageNdx"
      :visible.sync="mortgageNdxVisible"
      width="440px"
      :close-on-click-modal="false"
      center>
      <mortgage-ndx
      @listenStakeAction = "listenStakeAction"
      :mortgageNdxVisible = "mortgageNdxVisible"
      :MortgageStatus="MortgageStatus"/>
    </el-dialog>
    <!-- 赎回抵押 end -->
    <!-- 二维码弹窗 -->
    <el-dialog
      class="dialogPay"
      :visible.sync="ndxStakePay"
      width="440px"
      center>
      <code-stake
      @listenStakeAction = "listenStakeAction"
      :MortgageStatus="MortgageStatus"/>
    </el-dialog>
    <!-- 币种兑换弹窗 -->
    <el-dialog
      class="currencyExchange"
      :visible.sync="currencyExchangeVisible"
      width="430px"
      :close-on-click-modal="false"
      center>
      <currency-exchange
      @listenCurrencyExchange="listenCurrencyExchange"
      :convert="convert"
      :currencyExchangeVisible="currencyExchangeVisible"/>
    </el-dialog>
    <!-- 兑换USDT -->
    <el-dialog
      class="currencyExchange"
      :visible.sync="usdtCurrencyExchangeVisible"
      width="430px"
      :close-on-click-modal="false"
      center>
      <usdt-currency-exchange
      @listenUsdtCurrencyExchange="listenUsdtCurrencyExchange"
      :convert="convert"
      :usdtCurrencyExchangeVisible="usdtCurrencyExchangeVisible"/>
    </el-dialog>
    <!-- 充、提币弹窗 -->
    <el-dialog
      class="currencyExchange"
      :visible.sync="coinChargingVisible"
      width="500px"
      :close-on-click-modal="false"
      center>
      <coin-charging
      @listenCoinChargingVisible="handleCoinChargingVisible"
      :coinChargingVisible="coinChargingVisible"
      :coin="coin"
      :coinChargingWay="coinChargingWay"/>
    </el-dialog>
    <!-- 充提选择 -->
    <el-dialog
      class="currencyExchange"
      title="跨链充提"
      center
      :visible.sync="charginChangeVisible"
      width="370px"
      append-to-body>
      <chargin-change @listenCharginChange="handleCharginChange"/>
    </el-dialog>
    <!-- 充提币服务暂停 -->
    <el-dialog
      class="currencyExchange"
      center
      :visible.sync="withdrawDialogVisible"
      width="370px"
      append-to-body>
      <withdraw-dialog @listenWithdrawDialog="withdrawDialogVisible = false;"/>
    </el-dialog>
  </div>
  <!-- EOS钱包信息 end -->
</template>

<script>
import { EosModel } from '@/utils/eos';
import GetBackAdvance from '@/views/myWallet/components/GetBackAdvance';
import MortgageNdx from '@/views/myWallet/member/components/MortgageNdx'; // 赎回抵押弹窗
import CodeStake from '@/views/myWallet/member/components/CodeStake'; // 钱包抵押下单扫码弹窗
import CurrencyExchange from '@/views/myWallet/components/CurrencyExchange'; // 兑换弹窗
import UsdtCurrencyExchange from '@/views/myWallet/components/UsdtCurrencyExchange'; // 兑换USDT
import CoinCharging from '@/views/myWallet/components/CoinCharging'; // 充提币弹窗
import CharginChange from '@/views/myWallet/components/CharginChange'; // 充提选择弹窗
import WithdrawDialog from '@/components/WithdrawDialog'; // 充提币服务暂停

// EOS 账户文件
import { toFixed, toNonExponential, parseSymbol, guzhiForMat, getUrlParams } from '@/utils/validate';

export default {
  components: {
    GetBackAdvance,
    MortgageNdx, // 赎回抵押组件
    CodeStake,
    CurrencyExchange,
    UsdtCurrencyExchange,
    CoinCharging,
    CharginChange,
    WithdrawDialog
  },
  data() {
    return {
      chain: 'eos',
      hasDataForTable: 1,
      // microfinance: false, // 隐藏小额资产
      // visibleZeroList: false, // 隐藏金额为0
      tableData: [], // 过滤后的币种列表
      allData: [], // 币种列表(接口返回的全部信息)
      favoriteCode: [], // 我的关注币种id
      symbolList: [], // 去交易弹出层列表数据
      // coinDetail 资产详情
      coinDetail: {
        account: '',
        list: []
      },
      coinList: [], // 所有币种

      // 显示dialog
      showGetBackAdvance: false, // 取回预付款
      loading: false, // loading
      timeOut: null, // 搜索定时器
      refresh: false,
      symbolListLoading: false,
      historyList: JSON.parse(localStorage.getItem('historyData')) || [], // 历史数据
      historyVisible: false,
      isClick: true, // 避免重复点击
      mortgageNdxVisible: false, // 显示抵押赎回弹窗
      currencyExchangeVisible: false, // 兑换弹窗显示值
      usdtCurrencyExchangeVisible: false, // 兑换USDT
      charginChangeVisible: false, // 充提选择弹窗
      MortgageStatus: 0,
      ndxStakePay: false, // 钱包扫码弹窗
      options: [{
        subcurrencies: 'USDT'
      }, {
        subcurrencies: 'EUSD'
      }, {
        subcurrencies: 'CUSD'
      }], // eos分链估值列表
      checkedValue: 'USDT', // 选中的估值列表值
      // 我的资产下拉框值
      listStatus: [
        {
          value: 0,
          label: 'all',
        },
        {
          value: 2,
          label: 'notSmall', // 非小额资产
        },
      ],
      coinConfig: {
        sortName: 0, // 下拉选中值
        searched: '', // 搜索值
      },
      convert: '', // 兑换币种
      totalValuation: 0,
      hasParams: 0,
      coinChargingVisible: false, // 充提币弹窗
      coinChargingWay: 2, // 1-提币 2-充值
      coin: null,
      withdrawDialogVisible: false, // 充提币服务暂停
    }
  },
  props: {
    coinInfoList: {
      type: Array,
      defalut: [],
    },
    myStakeNdxALL: Number,
  },
  watch: {
    '$store.state.app.scatter.chain': function listen(val) {
      this.chain = val;
    },
    coinInfoList: function change(val) {
      this.loading = true;
      this.tableData = val.concat();
      this.allData = val.concat();
      let results = [];
      if (this.chain === 'eos') {
        results = this.allData.filter(v => Number(v.chainTotalValuation) >= 0.01);
      } else {
        let minNumber = 0.01;
        if (this.chain === 'tron') {
          minNumber = 5;
        }
        results = this.allData.filter(v => Number(v.usableEosValuation) >= minNumber);
      }
      if (results.length > 0) {
        this.coinConfig.sortName = 2;
      }
      if (this.$appName === 'tronNewdex' && val && val.length > 0) {
        this.totalValuation = 0;
        val.forEach((v, i) => {
          this.handleGetTronUsableCount(v, i);
        });
      }
      this.handleSearch();
    },
    'coinConfig.sortName': function change() {
      this.handleSearch();
    },
    'coinConfig.searched': function change() {
      this.handleSearch();
    },
    searched: function change() {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // 执行查询操作
        this.handleSearch();
      }, 300);
    },
  },
  created() {
  },
  mounted() {
    this.chain = this.$store.state.app.scatter.chain || 'eos';
    // this.tableData = this.coinInfoList;
    // this.allData = this.coinInfoList;
    // this.handleSearch();
    const hasParams = getUrlParams(window.location.href);
    if (hasParams && hasParams.usdt && this.$appName === 'eosNewdex') {
      this.hasParams = 1;
    }
  },
  computed: {
    handleClass() {
      return !this.historyList.length ? 'noIcon historyData' : 'historyData'
    },
    listenEosCount() {
      let count = 0;
      this.allData.forEach((item) => {
        if (!item.eosValuation) {
          return;
        }
        count += item.eosValuation * 1;
      });
      return count;
    }
  },
  methods: {
    // 刷新列表
    handleRefresh() {
      this.loading = true;
      this.refresh = true;
      this.coinConfig.searched = '';
      setTimeout(() => {
        this.$emit('listenToCoinList', 'refresh');
        this.refresh = false;
        this.loading = false;
      }, 500);
    },
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    handleToTransfer() { // 跳转到转账
      this.$router.push({ name: 'transferAccounts' });
    },

    handleToCenter(row) { // 跳转到交易中心
      // 添加历史记录
      const symbol = parseSymbol(row.symbol, '')[1].toUpperCase();
      if (this.coinConfig.searched !== '') {
        this.historyList.unshift(symbol);
        this.historyList = Array.from(new Set(this.historyList));
        if (this.historyList.length > 6) {
          this.historyList.pop();
        }
        localStorage.setItem('historyData', JSON.stringify(this.historyList));
      }
      if (symbol === 'REX') {
        this.$router.push({
          name: 'rexExchange'
        });
        return;
      }
      this.$router.push({
        path: `/trade/${row.symbol}`
      });
    },
    // 取回预付款
    handleGetBackAdvance() {
      this.showGetBackAdvance = true;
    },
    // 监听关闭对话框
    handleCloseGetBackAdvance(flag) {
      this.showGetBackAdvance = flag;
    },
    handleToHistory() { // 跳转到财务记录
      this.$router.push({ name: 'financialRecords' });
    },
    handleSymbolList(id) { // 获取交易对
      this.symbolListLoading = true;
      this.symbolList = [];
      const obj = this.tableData.find(v => v.coinId === id);
      if (obj) {
        this.symbolList = obj.gotoTrade || [];
        this.symbolListLoading = false;
      }
    },
    /* 搜索框过滤操作 start */
    handleSearch() {
      this.loading = true;
      setTimeout(() => {
        const queryString = this.coinConfig.searched;
        const chain = this.chain;
        let results = queryString ? this.allData.filter(v => v.code.toLowerCase().indexOf(queryString.toLowerCase()) !== -1) : this.allData;
        let minNumber = 0.01;
        if (this.coinConfig.sortName === 2) {
          if (this.$appName === 'eosNewdex') {
            if (chain === 'eos') {
              results = results.filter(v => Number(v.chainTotalValuation) >= minNumber);
            } else {
              results = results.filter(v => Number(v.usableEosValuation) >= minNumber);
            }
          }
          if (this.$appName === 'tronNewdex') {
            minNumber = 50;
            // 非小额资产
            results = results.filter(v => Number(v.chainTotalValuation) >= minNumber);
          }
        }
        this.tableData = results;
        if (this.allData.length) {
          this.hasDataForTable = results.length;
        }
        this.loading = false;
      }, 350);
    },
    /* 搜索框过滤操作 end */
    // 选择历史记录
    handleSelectHistory(item, index) {
      if (this.isClick) {
        this.isClick = false;
        this.historyVisible = false;
        this.handleSearch();
        this.coinConfig.searched = item;
        this.historyList.splice(index, 1);
        this.historyList.unshift(item);
        localStorage.setItem('historyData', JSON.stringify(this.historyList));
        setTimeout(() => {
          this.isClick = true;
        }, 500);
      }
    },
    // 1:抵押 2:赎回
    handleMortgageNdxShow(val) {
      if (val === 1) {
        this.MortgageStatus = 1;
      }
      if (val === 2) {
        this.MortgageStatus = 2;
      }
      this.mortgageNdxVisible = true;
    },
    listenStakeAction(val) {
      if (val === 'close') {
        this.mortgageNdxVisible = false;
        return;
      }
      this.ndxStakePay = true;
    },
    // 选择分链估值列表
    handleCheckOther(val) {
      this.checkedValue = val;
    },
    // 估值单位格式化
    handleGuzhiForMat() {
      return guzhiForMat(this.chain);
    },

    // 资产切换
    handleSelectAction(val) {
      this.coinConfig.sortName = val;
      this.handleSearch();
    },

    // EBTC/EETH兑换功能-usdt兑换
    handleCurrencyExchange(value) {
      if (value.name === 'USDT') {
        this.convert = 'ETH';
        this.usdtCurrencyExchangeVisible = true;
        return;
      }
      this.convert = value.name;
      this.currencyExchangeVisible = true;
    },
    // 测试
    handleCurrency() {
      this.convert = 'ETH';
      this.usdtCurrencyExchangeVisible = true;
    },
    // 关闭兑换弹窗
    listenCurrencyExchange() {
      this.currencyExchangeVisible = false;
    },
    // 关闭usdt兑换弹窗
    listenUsdtCurrencyExchange() {
      this.usdtCurrencyExchangeVisible = false;
    },
    parseSymbol(val, val2) {
      return parseSymbol(val, val2);
    },
    // 获取tron 列表币种余额
    handleGetTronUsableCount(item, index) {
      const contract = item.contract;
      const code = item.code;
      let type = 'trc10'
      if (contract.length > 32) {
        type = 'trc20'
      }
      if (code === 'TRX') {
        type = 'trx'
      }
      EosModel.getTronBalance(contract, type).then((backBalance) => {
        let amount = Number(backBalance.other);
        if (type === 'trx') {
          amount = Number(backBalance.trx);
        }
        const rows = item;
        // 余额 + 冻结
        const allMoney = amount + Number(rows.freezeCount)
        const cjValuation = toNonExponential(allMoney * Number(rows.chainPrice));
        rows.chainTotalValuation = toFixed(cjValuation, 6)
        rows.usableCount = toFixed(amount, item.coinDecimal);
        this.$set(this.tableData, index, rows);
        this.totalValuation += Number(cjValuation);
        this.$emit('listenToCoinList', 'valuation', this.totalValuation);
      });
    },
    // 充、提币
    handleCoinCharging(way) {
      this.coinChargingVisible = true;
      this.coinChargingWay = way;
    },

    // 充提币回调
    handleCoinChargingVisible(way) {
      if (way === 'close') {
        this.coinChargingVisible = false;
      }
    },
    // 打开充提
    handleCoinAction(item, way) {
      // // 充币服务器暂停
      // if (Number(this.$store.state.app.chargingStatus.depositStatus) === 0 && way === 2) {
      //   this.withdrawDialogVisible = true;
      //   return;
      // }
      // // 提币服务器暂停
      // if (Number(this.$store.state.app.chargingStatus.withdrawStatus) === 0 && way === 1) {
      //   this.withdrawDialogVisible = true;
      //   return;
      // }
      this.coin = item.name;
      if (item.name === 'EOS') {
        this.coin = 'USDT';
      }
      this.coinChargingWay = way;
      this.coinChargingVisible = true;
    },
    // 打开充提选择窗
    handleOpenCharginChange() {
      this.charginChangeVisible = true;
    },
    // 充提选择回调
    handleCharginChange(way) {
      this.charginChangeVisible = false;
      this.handleCoinCharging(way)
    }
  },
}
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';

.dataInfo{
  padding: 8px 0px;

  .shuaxin {
    position: absolute;
    right: 20px;
    color: #999;
    height: 40px;
    line-height: 48px;
    margin: 0;
    font-size: 16px;
    padding: 0px 5px;
    z-index: 200;

    &.act i{
      animation: rotating 1s linear infinite;
    }
  }
  .menu-down {
    position: absolute;
    top: 16px;
    right: 180px;
    z-index: 200;
  }
  .contractColor {
    color: #333;
  }
  .icon-huaban{
    color: #999;
  }
  .dropdownMenu {
    position: relative;
    padding-left: 5px;
    .backColor {
      position: absolute;
      left: 0;
      top: 50%;
      width: 4px;
      height: 18px;
      margin-top: -9px;
      background: #278EDA;
    }
  }
  .icon-huaban:hover{
    color: $-main-color;
  }

  .tool-item,
  .tools{
    float: right;
    line-height: 40px;
    color: #999;
    margin: 10px 5px;

    /deep/ .el-checkbox__label{
      padding-left: 4px;
    }
  }

  .tool-item{
    margin: 10px 5px;
    float: right;
    line-height: 40px;
    height: 40px;
  }

  .tool-item:nth-child(1){
    margin: 10px 20px 10px 0px;
  }

  .tools:hover{
    color: #278EDA;
  }

  .selectInput{
    line-height: 60px;
    margin-left: 20px;
    // width: 200px;

    .exchangeUsdt {
      margin-right: 15px;
    }
  }

  .table{
    padding: 0px 20px;
    position: relative;

    .symbolList{
      line-height: 40px;
    }
    /deep/ .el-table__body .cell,
    /deep/ .el-table__header .cell{
      color: #333;
      text-align: center;
      font-weight: normal;
    }

    /deep/ .el-table__header tr th:nth-child(1) .cell {
      text-align: left;
      padding-left: 18px;
    }

    /deep/ .el-table__body tr td:nth-child(2) .cell,
    /deep/ .el-table__header tr th:nth-child(2) .cell {
      text-align: left;
    }
    /deep/ .el-table__body tr td:nth-child(3) .cell,
    /deep/ .el-table__header tr th:nth-child(3) .cell,
    /deep/ .el-table__body tr td:nth-child(4) .cell,
    /deep/ .el-table__header tr th:nth-child(4) .cell,
    /deep/ .el-table__body tr td:nth-child(5) .cell,
    /deep/ .el-table__header tr th:nth-child(5) .cell,
    /deep/ .el-table__body tr td:nth-child(6) .cell,
    /deep/ .el-table__header tr th:nth-child(6) .cell {
      text-align: right;
    }
    /deep/ .el-table__body tr td:nth-child(1) .cell {
      display: flex;
      justify-items: center;
      align-items: center;
      padding: 0 15px;
      .newCoinImg {
        position: relative;
        display: block;
        width: 25px;
        height: 25px;
        background-color: #fff;
        background-image: url('/static/img/eos1.png');
        background-size: cover;
        border-radius: 50%;

        img {
          width: 100%;
          height: 100%;
          background: #fff;
          border-radius: 50%;

          &::after {
            content: '';
            background-image: url('/static/img/eos1.png');
            background-size: cover;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
      .newCoinImgForTron {
        img {
          &::after {
            content: '';
            background-image: url('../../../assets/img/tron-default.png?v=1.0.0');
            background-size: cover;
          }
        }
      }
      // .imageUrl {
      //   min-width: 25px;
      //   width: 25px;
      //   max-width: 25px;
      //   height: 25px;
      //   background: #fff;
      //   border-radius: 50%;
      //   vertical-align: middle;
      // }
      span {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: -3px;
        text-align: left;
      }
      span:nth-child(2){
        margin-left: 12px;
        // min-width: 105px;
        // max-width: 105px;
        min-width: 85px;
        max-width: 85px;
      }
      span:nth-child(3){
        min-width: 110px;
        padding-left: 8px;
      }
    }
    /deep/ .el-table__body tr td:nth-child(2) .cell,
    /deep/ .el-table__header tr th:nth-child(2) .cell,
    /deep/ .el-table__body tr td:nth-child(3) .cell,
    /deep/ .el-table__header tr th:nth-child(3) .cell{
      padding-right: 60px
    }
    /deep/ .el-table__body tr td:nth-child(2) .cell,
    /deep/ .el-table__header tr th:nth-child(2) .cell {
      padding-right: 20px;
    }
    /deep/ .el-table__body tr td:nth-child(7) .cell {
      padding: 0 !important;
    }

    /deep/ .el-table__header .cell{
      color: #999;
    }

    .blue{
      color: #77B9FF;
    }

    .action{
      margin-left: 15px;

      .newMsg{
        display: inline-block;
        height: 5px;
        width: 5px;
        border-radius: 50%;
        background-color: #F56C6C;
        position: absolute;
      }
    }

    .gray{
      color: #333;
    }

    .unabled{
      .icon-shuoming{
        display: inline-block;
        position: relative;
        top: 1px;
      }
    }
  }

  .tronClass {
    /deep/ .el-table__body tr td:nth-child(6) .cell,
    /deep/ .el-table__header tr th:nth-child(6) .cell {
      text-align: center;
    }
  }
}

.goTransaction{
  text-align: center;
}
// .selectOption {
//   .el-select {
//     /deep/ .el-input__inner {
//       border-color: none;
//       border: none;
//     }
//   }
// }
.dialogPay{
  /deep/ .el-dialog{
    background: url('../../../assets/img/wallet/bg-financial.png') no-repeat;
    color: white;
    position: relative;

    .el-icon-close{
      color: white;
    }

    .dialog-logo{
      position: absolute;
      font-size: 30px;
      left: 30px;
      top: 20px;
    }
  }

  /deep/ .el-dialog__body{
    padding: 0px;
  }
}
.currencyExchange {
  /deep/ .el-dialog__header {
    padding-top: 25px;
  }
}
.firstStage {
  & > div {
    display: inline-block;
    border: 1px solid #D7D7D7;
    padding: 8px 30px;
    cursor: pointer;
    color: #999;
    border-radius: 3px;
    background: #fff;
    margin: 0 25px 0 0;
  }

  .active {
    color: $-btn-skyblue;
    border: 1px solid $-btn-skyblue;
    background: #fff;
  }

  &.vipClass {
    .active {
      color: #E5BC7E;
      border: 1px solid #E5BC7E;
      background: #fff;
    }
  }

  .optional {
    .iconfont {
      display: inline-block;
      vertical-align: middle;
      font-size: 15px !important;
      margin-right: -2px;
    }
  }
}
// 主图样式
.theme-1B1D27{
  .content{
    .mainView{
      .dataInfo{
        .gray{
          color: rgba(255, 255, 255, .8);
        }
        .contractColor {
          color: rgba(255, 255, 255, .8) !important;
        }
        // box-shadow: 0px 0px 15px rgba(255, 255, 255, .4) inset;

        .table{
          /deep/ .el-table__body .cell,
          /deep/ .el-table__header .cell{
            color: rgba(255, 255, 255, .8);
            font-weight: normal;
          }

          /deep/ .el-table__empty-block{
            background-color: $-black1;
          }

          /deep/ .el-table__header tr th:nth-child(1) .cell {
            text-align: left;
            padding-left: 18px;
          }
        }
      }
    }
  }
  .firstStage {
    & > div {
      background: $-topcolor;
      border-color: #4e5b85;
      color: #7b8db9;
    }
    .active {
      color: $-btn-skyblue;
      background: $-topcolor;
    }

    &.vipClass {
      .active {
        color: #E5BC7E;
      }
    }
  }
}

@media screen and (max-width: 1280px) {
  .dataInfo {
    .menu-down {
      right: 125px;
    }
  }
}
</style>
